<template>
	<div class="title header-layout">
		<router-link to="/index" class="back iconfont icon-fanhui"></router-link>
		<h2><router-link to="/books">书籍</router-link></h2>
		<ul class="title__list">
			<!--链接到不同的分类(例如：考研，高数，四六级)-->
			<li><router-link :to="{name: 'books_detail', params: {type: 'kaoyan'}}">考研</router-link></li>
			<li><router-link :to="{name: 'books_detail', params: {type: 'cet'}}">四六级</router-link></li>
			<li><router-link :to="{name: 'books_detail', params: {type: 'textbook'}}">教材</router-link></li>
			<li><router-link :to="{name: 'books_detail', params: {type: 'civil'}}">公务员</router-link></li>
			<li @click="showClassify"><i class="iconfont icon-zhankai"></i></li>
		</ul>
	</div>
</template>

<script>
	export default {
		methods: {
			showClassify() {
				this.$parent.isClassify = true;
			}
		}
	}
</script>

<style scoped lang="scss">
	.title {
		border-bottom: 1px solid #ccc;
		h2 {
			margin-left: rem(6);
			font-size: $font-bg;
			a {
				color: #2a4;
			}
		}
	}
	.title__list {
		margin-left: auto;
		display: flex;
		align-items: center;
		li {
			padding: 0 rem(6);
			a {
				font-size: $font-sm;
			}
			i {
				font-size: $font-sm;
			}
		}
	}
	.title__list li:nth-of-type(1) a {
		color: #449CD5;
	}
	.title__list li:nth-of-type(2) a {
		color: #f70;
	}
	.title__list li:nth-of-type(3) a {
		color: #999;
	}
	.title__list li:nth-of-type(4) a {
		color: #9BD7C5;
	}
	.title__list li:nth-of-type(5) {
		color: #3b3;
	}
</style>